import React, { Component } from 'react'
import { hashHistory } from 'react-router'
import { Icon } from 'antd-mobile'
import { NavHeader } from '../common'
import { InOutDetail } from './'

export default class InOutPage extends Component {
  constructor() {
    super()
    this.state = {
      detailModal: false,
    }
  }
  render() {
    const { detailModal } = this.state
    return (
      <div className={`rt-in-out-page-container cm-column-flex-box`}>
        <NavHeader title="收支明细" onClick={() => hashHistory.goBack()} />

        <div className={`-hint-message`}>最近30天交易记录</div>

        <div className={`cm-scrollable-container`}>
          {
            Array(15).fill(1).map(v => (
              <div
                key={Math.random()}
                className={`rt-in-out`}
                onClick={() => {
                  this.setState({
                    detailModal: true,
                  })
                }}
              >
                <div className={`-left`}>
                  <span className={`-delta`}>+12</span>
                  <span>04-11 15:01</span>
                </div>

                <div className={`-right`}>
                  <div>
                    <span className={`-symbol`}>余额：2312元</span>
                    <span>平仓</span>
                  </div>

                  <Icon type="right" />
                </div>
              </div>
            ))
          }
        </div>
        <InOutDetail
          visible={detailModal}
          onClose={() => {
            this.setState({detailModal: false})
          }}
        />
      </div>
    )
  }
}